<template>
  <div class="breadcrumb-wrapper">
    <div class="title">当前位置：</div>
    <el-input
      class="file-path-input"
      ref="filePathInputRef"
      placeholder="请输入路径"
      v-model="inputFilePath"
      :autofocus="true"
      v-show="isShowInput"
      @blur="handleInputBlurEnter"
      @change="handleInputBlurEnter"
    ></el-input>
    <div
      class="breadcrumb-box"
      :class="{ 'able-input': true }"
      v-show="!isShowInput"
      @click.self="handleClickBreadCrumbSelf"
    >
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          v-for="(item, index) in breadCrumbList"
          :key="index"
          @click="get(item.path)"
          :to="getRouteQuery(item)"
          >{{ item.name }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
  </div>
</template>

<script setup>
import fileList from "@/store/modules/fileList";

const store = fileList()
const props = defineProps({
  // 文件路径
  filePath: {
    type: String,
  },
});
const inputFilePath = ref("/"); //  路径输入
const isShowInput = ref(false); //  是否展示路径输入框
const fileTypeMap = ref({
  1: "全部图片",
  2: "全部文档",
  3: "全部视频",
  4: "全部音乐",
  5: "其他",
  6: "回收站",
});
const route = useRoute();
const router = useRouter();
const breadCrumbList = computed({
  get() {
    let filePath = route.query.filePath;
    let filePathList = filePath ? filePath.split("/") : [];
    let res = []; //  返回结果数组
    let _path = []; //  存放祖先路径
    for (let i = 0; i < filePathList.length; i++) {
      if (filePathList[i]) {
        _path.push(filePathList[i]);
        res.push({
          path: _path.join("/"),
          name: filePathList[i],
        });
      } else if (i === 0) {
        //  根目录
        filePathList[i] = "";
        _path.push(filePathList[i]);
        res.push({
          path: "/",
          name: "全部文件",
        });
      }
    }
    return res;
  },
  set() {
    return [];
  },
});
/**
 * 点击面包屑导航栏空白处
 */
function handleClickBreadCrumbSelf() {
  isShowInput.value = true;
}
/**
 * 路径输入框失去焦点或用户按下回车时触发
 */
function handleInputBlurEnter() {
  isShowInput.value = false;
  if (inputFilePath.value != props.filePath) {
    const fixInputFilePath = inputFilePath.value.endsWith("/")
      ? inputFilePath.value.slice(0, -1)
      : inputFilePath.value;
    router.push({ query: { filePath: `${fixInputFilePath}` } });
    get(fixInputFilePath)
  }
}
// 获取文件参数
function getRouteQuery(item) {
  return { query: { filePath: item.path } };
}
//路径跳转
function get(path) {
  console.log(path)
    store.searchByPath(path);
}
</script>

<style lang="stylus" scoped>
.breadcrumb-wrapper {
  padding: 0px 16px;
  height: 30px;
  line-height: 30px;
  display: flex;

  .title, >>> .el-breadcrumb {
    height: 30px;
    line-height: 30px;
  }

  .file-path-input {
    flex: 1;
    font-size: 14px;
  }

  .breadcrumb-box {
    padding: 0 8px;
    flex: 1;
    display: flex;

    &.able-input {
      cursor: pointer;

      &:hover {
        background: #F5F7FA;
      }
    }
  }
}
</style>